<template>
  <Card class="left-area">
    <p slot="title" >流程元素</p>
    <ul class="nodes-group">
      <li class="nodes-item" v-for="item in nodes" :key="item.id">
        <div :id="item.id" :ref="item.ref" :typeid="item.typeid">
          <Tooltip :content="item.name" placement="right">
            <div class="nodes-item-content">
              <Icon :type="item.icon" />{{item.name}}
            </div>
          </Tooltip>
        </div>
      </li>

      <!-- <li class="item">
        <div 
          id="1" 
          ref="start" 
          class=" center" 
          typeid="start"
        >
          <Tooltip 
            content="流程开始" 
            placement="right"
          >
            <div class=" ta">
              <Icon type="log-out" />流程开始
            </div>
          </Tooltip>
        </div>
      </li>
      <li class="item">
        <div 
          id="2" 
          ref="task" 
          class=" center" 
          typeid="task"
        >
          <Tooltip 
            content="人工任务" 
            placement="right"
          >
            <div class=" ta">
              <Icon type="person" />人工任务
            </div>
          </Tooltip>
        </div>
      </li> -->
      <!-- <li class="item">
        <div class=" center" ref="decision" typeid="decision" id="3">
          <Tooltip content="决策" placement="right">
            <div class=" ta">
              <Icon type="ios-checkmark-outline"></Icon>决策
            </div>
          </Tooltip>
        </div>
      </li> -->
      <!-- <li class="item">
        <div 
          id="4" 
          ref="end" 
          class=" center" 
          typeid="end"
        >
          <Tooltip 
            content="流程结束" 
            placement="right"
          >
            <div class=" ta">
              <Icon type="log-in" />流程结束
            </div>
          </Tooltip>
        </div>
      </li>
      <li class="item">
        <div 
          id="5" 
          ref="auto" 
          class=" center" 
          typeid="auto"
        >
          <Tooltip 
            content="自动任务" 
            placement="right"
          >
            <div class=" ta">
              <Icon type="android-settings" />自动任务
            </div>
          </Tooltip>
        </div>
      </li>
      <li class="item">
        <div 
          id="6" 
          ref="fork" 
          class=" center" 
          typeid="fork">
          <Tooltip 
            content="任务分派" 
            placement="right"
          >
            <div class=" ta">
              <Icon type="arrow-expand" />任务分派
            </div>
          </Tooltip>
        </div>
      </li>
      <li class="item">
        <div 
          id="7" 
          ref="join" 
          class=" center" 
          typeid="join"
        >
          <Tooltip 
            content="任务汇聚" 
            placement="right"
          >
            <div class=" ta">
              <Icon type="arrow-shrink" />任务汇聚
            </div>
          </Tooltip>
        </div>
      </li>
      <li class="item">
        <div 
          id="8" 
          ref="subflow" 
          class=" center" 
          typeid="subflow"
        >
          <Tooltip 
            content="子流程" 
            placement="right"
          >
            <div class=" ta">
              <Icon type="ios-cloud-upload-outline" />&nbsp&nbsp子流程
            </div>
          </Tooltip>
        </div>
      </li> -->
    </ul>
  </Card>
</template>

<script>
export default {
  name: 'LeftArea',
  props: {
    jsp: {
      type: Object
    }
  },
  data () {
    return {
      nodes: [
        {
          name: '流程开始',
          id: '1',
          ref: 'start',
          typeid: 'start',
          icon: 'md-appstore'
        },
        {
          name: '人工任务',
          id: '2',
          ref: 'task',
          typeid: 'task',
          icon: 'md-person'
        },
        {
          name: '流程结束',
          id: '4',
          ref: 'end',
          typeid: 'end',
          icon: 'md-send'
        },
        {
          name: '自动任务',
          id: '5',
          ref: 'auto',
          typeid: 'auto',
          icon: 'md-flash'
        },
        {
          name: '任务分派',
          id: '6',
          ref: 'fork',
          typeid: 'fork',
          icon: 'md-crop'
        },
        {
          name: '任务汇聚',
          id: '7',
          ref: 'join',
          typeid: 'join',
          icon: 'md-contract'
        },
        {
          name: '子流程',
          id: '8',
          ref: 'subflow',
          typeid: 'subflow',
          icon: 'md-disc'
        },
        {
          name: '任务指派',
          id: '9',
          ref: 'dispatch',
          typeid: 'dispatch',
          icon: 'ios-contacts'
        },
        {
          name: '任务分配',
          id: '10',
          ref: 'distribute',
          typeid: 'distribute',
          icon: 'ios-git-network'
        }
      ]
    };
  },
  mounted () {
    this.init();
  },
  methods: {
    init () {
      this.jsp.draggable(
        [
          this.$refs.start,
          this.$refs.task,
          this.$refs.end,
          this.$refs.auto,
          this.$refs.fork,
          this.$refs.join,
          this.$refs.subflow,
          this.$refs.dispatch,
          this.$refs.distribute
        ],
        {
          clone: true,
          drag: params => {
            this.$emit('update-pos', params.pos);
          }
        }
      );
    }
  }
};
</script>

<style lang="css">
.item {
  position: relative;
  height: 1.5em;
  list-style-type: none;
  line-height: 1.5em;
}

.center {
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
  top: 25px;
  width: 100px;
  border: 0.5px solid #333;
  box-sizing: border-box;
  text-align: center;
  cursor: Move;
}

.ta {
  /* width: 100px; */
  /* height: 50px; */
  /* padding: 10%; */
  /* font-size: 1.1em; */
}
.nodes-group {
  list-style-type: none;
}
.nodes-item {
  line-height: 3em;
  cursor: move;
}
</style>
